<template>
  <div id="EchartRadar" :style="{ width: '100%', height: '100%' }"></div>
</template>

<script>
export default {
  data() {
    return {
      chartOption: {
        title: {
          text: '2019年度账号权限管理审计专题每月占比',
          left: 'center'
        },
        legend: {
          data: ['每月占比'],
          icon: 'diamond',
          bottom: 0
        },
        tooltip: {
          confine: true,
          enterable: true,
          formatter(params) {
            let showHtm = ''
            let value = params.data.value
            let sum = eval(value.join('+'))
            for (var i = 0; i < value.length - 1; i++) {
              //提示框显示
              showHtm +=
                `${i + 1}月份占比` +
                '：' +
                `${(value[i] / sum).toFixed(2) * 100}%` +
                '<br/>'
            }
            return `每月占比：<br/>${showHtm}`
          }
        },

        radar: {
          splitNumber: 5,
          indicator: [
            {
              name: '2019/1/1',
              max: 10000,
              axisLabel: {
                show: true,
                fontSize: 12,
                color: '#838D9E',
                showMaxLabel: false, //不显示最大值，即外圈不显示数字30
                showMinLabel: true //显示最小数字，即中心点显示0
              }
            },
            { name: '2019/2/1', max: 10000 },
            { name: '2019/3/1', max: 10000 },
            { name: '2019/4/1', max: 10000 },
            { name: '2019/5/1', max: 10000 },
            { name: '2019/6/1', max: 10000 },
            { name: '2019/7/1', max: 10000 },
            { name: '2019/8/1', max: 10000 },
            { name: '2019/9/1', max: 10000 },
            { name: '2019/10/1', max: 10000 },
            { name: '2019/11/1', max: 10000 },
            { name: '2019/12/1', max: 10000 }
          ]
        },
        series: [
          {
            name: '每月占比',
            type: 'radar',
            areaStyle: {},
            data: [
              {
                itemStyle: {
                  normal: {
                    color: 'rgba(255,225,0,1)',
                    lineStyle: {
                      color: 'rgba(255,225,0,.3)'
                    }
                  }
                },
                //在拐点处显示数值
                label: {
                  normal: {
                    show: true,
                    color: '#666600',
                    formatter: params => {
                      let value = params.data.value
                      let sum = eval(value.join('+'))
                      return `${(params.value / sum).toFixed(2) * 100}%`
                    }
                  }
                },
                value: [
                  8765,
                  3678,
                  6543,
                  3245,
                  8789,
                  5869,
                  8997,
                  7658,
                  8756,
                  2345,
                  4743,
                  3324,
                  2522
                ]
              }
            ]
          }
        ]
      }
    }
  },

  mounted() {
    this.drawLine()
  },

  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('EchartRadar'))
      // 绘制图表
      myChart.setOption(this.chartOption)
    }
  }
}
</script>

<style lang="scss" scoped></style>
